<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
      <ion-title>event list</ion-title>
      </ion-toolbar>
      <ion-toolbar>
      <ion-searchbar ></ion-searchbar>
      </ion-toolbar>
      
    </ion-header>
    <ion-content>
        <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
          <ion-refresher-content
            pulling-text="下拉刷新"
            refreshing-text="正在刷新..."
            complete-text="刷新完成"
          />
        </ion-refresher>
        <ion-grid>
        <ion-row fixed="true" class="ion-align-items-start">
            <ion-col size-sm="2">MISSION</ion-col>
            <ion-col size-sm="2">TRIGGER</ion-col>
            <ion-col size-sm="2">NAME</ion-col>
            <ion-col size-sm="2">TIME</ion-col>
            <ion-col size-sm="1.5">RE</ion-col>
            <ion-col size-sm="1.5">DEC</ion-col>
            <ion-col size-sm="1">ERR</ion-col>
          </ion-row>
        <ion-list v-if="items">
          <ion-item class="list" v-for="item in items" :key="item.id"  button @click="goToDetail(item)">
              <ion-col size-sm="2">{{ item.triggerTelescopeName }}</ion-col>
              <ion-col size-sm="2">{{ item.triggerName }}</ion-col>
              <ion-col size-sm="2">{{ item.eventName }}</ion-col>
              <ion-col size-sm="2">{{ item.triggerTime }}</ion-col>
              <ion-col size-sm="1.5">{{ item.triggerRa }}</ion-col>
              <ion-col size-sm="1.5">{{ item.triggerDec }}</ion-col>
              <ion-col size-sm="1">{{ item.triggerErr }}</ion-col>  
          </ion-item>
        </ion-list>
        
       
    </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
import { IonPage, 
          IonGrid, 
          IonCol, 
          IonRow, 
          IonContent,
          IonToolbar,
          IonTitle,
          IonHeader,
          IonSearchbar,
          IonRefresher,
          IonRefresherContent,
          IonList,
          IonItem,
          } from '@ionic/vue';
//import axios from 'axios';
import service from '@/api/api'

import {ref} from 'vue';
import { onMounted, onUnmounted } from 'vue';
const intervalId = ref();

onMounted(() => {
      // 设置定时器，每5秒刷新一次页面
      intervalId.value = setInterval(() => {
        console.log('页面刷新');
      }, 5000);
    });
    onUnmounted(() => {
      // 清除定时器
      if (intervalId.value) {
        clearInterval(intervalId.value);
      }
    });
    
const items=ref({item:{
  triggerTelescopeName:'',
  eventName: '',
  triggerName: '',
  triggerTime: '',
  triggerRa: '',
  triggerDec: '',
  triggerErr: '',
  id:''
  }
})


//:style="{ backgroundColor: getColor(item.triggerTelescopeName) }" 
  //   const getColor = (triggerTelescopeName: any) => {
  //     switch (triggerTelescopeName) {
  //   case 'SVOM':
  //     return 	'red'
  //   case 'Fermi':
  //     return 'green'
  //   default:
  //     return 'white'
  // }
  //   };
   const fetchData =async () => {
      try {
        
        const response = await service.post('/alertApi/getTriggers',{length:100});
        items.value = response.data.data.list;         
          console.log(response.data);
      } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:',error);
      }
    }  
    onMounted(fetchData);

    const goToDetail = (item: any) => {
      router.push({
      name: 'eventdetails',
      params: {  item }, 
    });
  };
    
// 下拉刷新事件处理函数
async function doRefresh(item:any) {
  await fetchData(); // 获取最新数据
  item.detail.complete(); // 刷新完成
}



</script>

<style scoped>
  ion-col {
    /* color: #1c1b1b; */
    text-align: center;
  }
 .list{
  text-align: center;
 }
  ion-title{
    text-align: center;
  }
</style>
